<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="我的费用"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="选择日期区间" :value="date" @click="show = true" is-link/>
    <van-calendar
v-model="show"
type="range"
@confirm="onConfirm"
                  :min-date="minDate"
                  :max-date="maxDate"
    />

    <van-cell-group v-for="item in costList " :key="item.costid">
      <van-cell :title="item.date" :value="item.zje" :label="item.bz" @click="doModify(item)"/>
    </van-cell-group>

    <div class="dibu">
      <div style="position: absolute;right: 20px;font-size: 20px;">合计: {{total}}元</div>
    </div>

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, CellGroup } from 'vant'
import { floatAdd } from '../../utils/NumberUtil'
import { queryUserInfo, listCost } from '../../api/api'

export default {
  name: 'MyCost',
  data() {
    return {
      deptname: '',
      userid: '',
      postList: [],
      deptid: '',
      name: '',
      list: [],
      loading: false,
      finished: false,
      date: '',
      show: false,
      costList: [],
      total: '',
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31)
    }
  },

  created() {
    const userid = this.$store.getters.userId
    this.userid = userid
    this.queryUserInfo()
  },
  mounted() { },

  methods: {
    // 查询当前用户所在部门
    queryUserInfo() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.deptname = response.data.deptname
          this.deptid = response.data.deptid
          this.postList = response.data.postList
          this.name = response.data.name
          this.userid = response.data.userid
          this.queryCostList()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm(date) {
      const [start, end] = date
      this.show = false
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    queryCostList() {
      const param = {}
      param.userid = this.userid
      param.startDate = this.startDate
      param.endDate = this.endDate
      listCost(param).then(response => {
        if (response.code === 200) {
          console.log('费用类别')
          console.log(response)
          const costList = response.rows
          let total = 0
          if (costList) {
            for (var i = 0; i < costList.length; i++) {
              total = floatAdd(total, costList[i].zje)
            }
          }
          this.total = total

          this.costList = costList
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doModify(item) {
      this.$router.push({ path: '/addFy', query: { item: item }})
    }

  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: white;
  }

  .top{
    padding-left: 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: row;
  }

  .jt{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
  }

  .rownr{
    display: flex;
    flex-direction: row;
  }

  .dibu{
    left: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #F0F4FE;
    box-shadow: 10px 10px 5px #888888;
    color: black;
  }

</style>
